import { Meta, StoryObj } from "@storybook/react/*";
import Menu, { MenuItem } from "./menu";
import Button from "../Button/button";
import SubMenu from "./subMenu";
import { ComponentProps } from "react";

type StoryProps = ComponentProps<typeof Menu>;

const meta: Meta<StoryProps> = {
    component: Menu,
    title: 'Components/Menu',
    tags: ['autodocs'],
}
export default meta;
type Story = StoryObj<StoryProps>;

// 横向菜单
export const Default: Story = {
    name: '基础菜单',
    render: (args) => {
        return <Menu {...args}>
            <MenuItem>选项1</MenuItem>
            <MenuItem>选项2</MenuItem>
            <MenuItem>选项3</MenuItem>
        </Menu>;
    }
};

export const Vertical: Story = {
    name: '竖向菜单',
    args: {
        mode: 'vertical',
    },
    render: (args) => (
        <Menu {...args}>
            <MenuItem>首页</MenuItem>
            <MenuItem>作品集</MenuItem>
            <MenuItem>常见问题</MenuItem>
        </Menu>
    )
}